import React from 'react';
import { connect } from 'dva';
import BasePage from './BasePage'
import { Card, Space, Form, Radio, Upload, Input, Button, Alert, Result, Select } from 'antd'
import { UploadOutlined } from '@ant-design/icons';
import style from '../assets/less/certificationLess.less'
import CurrentLocation from '../components/currentLocation'
import breadArr from '../constant/breadArr'
const { Option } = Select;
const { TextArea } = Input;

const fileTypeArr = ["验证规范", "验证指导协议", "试点计划规范性报告", "验证模板", "会议文件", "国际ETV","其他"]

const layout = {
    labelCol: { span: 6 },
    wrapperCol: { span: 16 },
};
const tailLayout = {
    wrapperCol: { offset: 6, span: 16 },
};

class UploadFilePage extends React.Component {
    constructor(props) {
        super(props)
    }

    fileNameBeforeUpload = (file, fileList) => {
        return false
    }

    onFinishUploadFile = values => {
        let formData = new FormData()
        formData.append("informationAbstract",values.introduction)
        formData.append("informationTitle",values.fileName.file)
        formData.append("informationType",values.fileType)
        this.props.dispatch({
            type:"uploadFile/uploadFile",
            data:formData
        })
    }

    render() {
        if (this.props.user == {} || this.props.user.userType != 3) {
            return (
                <BasePage>
                    <CurrentLocation breadArr={breadArr.UploadFilePage}></CurrentLocation>
                    <Result
                        status="warning"
                        title="请先登录验证委员管理会账号后再进行资料上传！"
                    >
                    </Result>
                </BasePage>
            )
        }

        return (
            <BasePage>
                <CurrentLocation breadArr={breadArr.UploadFilePage}></CurrentLocation>
                <Form
                    {...layout}
                    name="uploadFile"
                    initialValues={{ remember: true }}
                    onFinish={this.onFinishUploadFile}
                    onFinishFailed={this.onFinishFailed}
                >
                    <Form.Item
                        label="资料类型"
                        name="fileType"
                        rules={[{ required: true, message: '请选择资料类型!' }]}
                    >
                        <Select style={{ width: 200 }}>
                            {fileTypeArr.map((item, index) => {
                                return (
                                    <Option value={index+1}>{item}</Option>
                                )
                            })}
                        </Select>
                    </Form.Item>

                    <Form.Item
                        label="选择资料"
                        name="fileName"
                        rules={[{ required: true, message: '请选择资料文件!' }]}
                    >
                        <Upload
                            style={{ width: 200 }}
                            maxCount="1"
                            beforeUpload={this.fileNameBeforeUpload}
                        >
                            <Button icon={<UploadOutlined />}>选择文件</Button>
                        </Upload>
                    </Form.Item>

                    <Form.Item
                        label="资料简介"
                        name="introduction"
                        rules={[{ required: true, message: '请输入资料简介!' }]}
                    >
                        <TextArea rows={4} />
                    </Form.Item>

                    <Form.Item {...tailLayout}>
                        <Button type="primary" htmlType="submit">
                            提交
                    </Button>
                    </Form.Item>
                </Form>
            </BasePage>
        )
    }
}

const mapStateToProps = state => {
    let user = state.app.user
    return {
        user
    }
}

export default connect(mapStateToProps)(UploadFilePage)